<template>
	<view class="home">
		<!-- 顶部导航部分 -->
		<view class="select">
			<view :class="show === 1?'active':''" @click="Show(1)">登录</view>
			<view :class="show === 2?'active':''" @click="Show(2)">注册</view>
		</view>

		<!-- 登录界面区域 -->
		<view class="login" v-if="show == 1?true:false">
			<view class="login_input">
				<view class="login_label" >学号:</view>
				<input type="text" value="" placeholder="请输入账号" maxlength="12" v-model.lazy="login.campus_number" />
			</view>

			<view class="login_input">
				<view class="login_label">密码:</view>
				<input type="text" value="" placeholder="请输入密码" v-model.lazy="login.password" />
			</view>

			<button type="primary" :disabled="isRequestFlag" class="login_button" @click="Login">确定登录</button>
		</view>

		<!-- 注册界面 -->
		<view class="register" v-if="show == 2?true:false">
			<view class="register_head">
				<image :src='msg_head' mode=""></image>
			</view>

			<button type="primary" @click="getHead()" class="upload_head">更换头像</button>

			<view class="register_input">
				<view class="">学号:</view>
				<input type="text" v-model="New_user.New_number" placeholder="例如:B20190306117" maxlength="12" />
			</view>

			<view class="register_input">
				<view class="">姓名:</view>
				<input type="text" v-model="New_user.name" placeholder="例如:小明" maxlength="4" />
			</view>

			<view class="register_input">
				<view class="">昵称:</view>
				<input type="text" v-model="New_user.Int_name" placeholder="最多十个字符哦" maxlength="10" />
			</view>

			<view class="register_input">
				<view class="">密码:</view>
				<input type="text" v-model="New_user.New_password" password="true" placeholder="请输入密码" />
			</view>

			<view class="register_input">
				<view class="">密码:</view>
				<input type="text" v-model="New_user.Re_password" password="true" placeholder="请重新输入密码" />
			</view>

			<!-- <view class="upload">
				<view class="">添加校园卡:</view>
				<image :src="msg_campus_special" mode="" @click="special"></image>
			</view> -->

			<button type="primary" :disabled="isRequestFlag" class="button" @click="Register">注册</button>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: 1,
				msg_head: '../../static/temp/head.png',
				msg_campus_special: '../../static/temp/add.png',
				login: {
					campus_number: '',
					password: ''
				},
				isRequestFlag:false,
				User: {},
				New_user: {
					New_number: '',
					name: '',
					Int_name: '',
					New_password: '',
					Re_password: ''
				}
			}
		},
		methods: {
			Show(index) {
				if (index == 1) {
					this.show = 1;
				} else {
					this.show = 2;
				}
			},
			getHead() {
				uni.chooseImage({
					count: 1,
					success: res => {
						this.msg_head = res.tempFilePaths[0];
						uni.setStorageSync('Head', this.msg_head);
					}
				})
			},
			special() {
				this.msg_campus_special = '../../static/temp/add_green.png';
				let id = setInterval(() => {
					this.msg_campus_special = '../../static/temp/add.png';
					uni.chooseImage({
						count: 1,
						success: res => {
							uni.setStorageSync('msg_campus', res.tempFilePaths[0]);
						}
					})
					clearInterval(id);
				}, 1000)
			},
			// send_SMS(){
			// 	console.log('发送短信啦')
			// },
			async Login() {
				let number = this.login.campus_number;
				let secret = this.login.password;
				// let number = 'B20190306118';
				// let secret = '555555';

				// const res = await this.$myRequest({
				// 	url: `/getUser?number=${number}&secret=${secret}`
				// })
				// 改成全局接口请求的封装
				this.isRequestFlag = true;
				const res = await uni.request({
					url: `http://172.16.40.118:8080/getUser?number=${number}&secret=${secret}`,
					success: (res) => {
						console.log(res);
						let  {statusCode,data} = res
						if(statusCode == 200){
							// console.log(this.User,'------------------')
							this.User = data;
							
							try{
								uni.setStorageSync('userInfo',JSON.stringify(data));
							}catch(e){
								//TODO handle the exception
								console.log(e);
							}
							if (this.User.message == null || this.User.code != 0) {
								uni.showToast({
									title: '账号或密码错误',
									icon:'none'
								})
								
								this.login.campus_number = '';
								this.login.password = '';
								this.isRequestFlag = false;
								
								return;
							}
							let id = this.User.message.id;
							uni.$emit('give_UserMessage', this.User);
							getApp().globalData.User = this.User;
							console.log(getApp().globalData.User)
							uni.switchTab({
								url: '../../pages/personal_center/personal_center'
							})
							
							this.isRequestFlag = false;
						}
					},
					fail: (err) => {
						this.isRequestFlag = false
						console.log(err);
					}
				})
				

				

				
			},
			async Register() {
				if (this.New_user.Int_name == '' || this.New_user.name == '' || this.New_user.New_number == '' || this.New_user.New_password ==
					'' || this.New_user.Re_password == '') {
					return;
				}
				if (this.New_user.New_password != this.New_user.Re_password) {
					uni.showToast({
						title: '输入有误哦',
						duration: 800,
						mask: true,
					})
					return;
				}
				let dataUrl = 'register_User'
				const res = await this.$myRequest({
					url: `${dataUrl}?New_user=${JSON.stringify(this.New_user)}`
				})
				if (res.data.code == 0) {
					uni.showModal({
						title: '温馨提示',
						content: '注册成功!',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: '../../pages/personal_center/personal_center'
								})
							}
						}
					})

				}
			}
		}
	}
</script>

<style lang="scss">
	.home {
		width: 750rpx;
	}

	.select {
		width: 100%;
		margin-top: 60rpx;
		display: flex;
		box-sizing: border-box;

		view {
			width: 50%;
			padding: 10rpx 0;
			font-size: 40rpx;
			text-align: center;
			// border-radius: 20rpx;
		}

		.active {
			// background: #4CD964;
			// border-bottom: 1px solid #C0C0C0;
			color: #000;
			font-weight: 700;
		}
	}

	.login {
		width: 90%;
		margin: 100rpx auto;
		padding: 30rpx 20rpx;
		overflow: hidden;
		border: 1px solid #C0C0C0;
		border-radius: 10rpx;
		box-sizing: border-box;
		
		
		.login_input {
			display: flex;
			margin-top: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 1px solid #C0C0C0;
			
			input {
				padding-left: 10px;
				padding-right: 20rpx;
				width: 80%;
				height: 100%;
			}
		}

		.login_button {
			margin-top: 140rpx;
			width: 90%;
			height: 80rpx;
			font-size: 30rpx;
			border-radius: 40rpx !important;
			background-color: $main-color;
		}
		
		.login_button-in{
			background-color: #333;
		}
	}

	.register {
		width: 90%;
		margin: 100rpx auto;
		padding: 30rpx 20rpx;
		border: 1px solid #C0C0C0;
		border-radius: 10rpx;
		box-sizing: border-box;

		.register_head {
			image {
				display: block;
				width: 150rpx;
				height: 150rpx;
				margin: 0 auto;
				border-radius: 80rpx;
			}

		}


		.positon {
			margin-left: 35.5px;
		}

		.register_input {
			display: flex;
			margin-top: 60rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 1px solid #C0C0C0;

			input {
				padding: 0 20rpx;
				width: 80%;
				height: 100%;
				padding-left: 15rpx;
			}
		}

		.upload_head {
			width: 100px;
			background: #F0AD4E;
			margin-top: 18px;
			margin-bottom: 18rpx;
		}

		// .upload {
		// 	display: flex;

		// 	view {
		// 		height: 150rpx;
		// 		line-height: 150rpx;
		// 		margin-left: 15px;
		// 	}

		// 	image {
		// 		display: block;
		// 		width: 150rpx;
		// 		height: 150rpx;
		// 	}

		// }

		// .check{
		// 	display: flex;
		// 	margin-bottom: 60rpx;
		// 	padding: 50rpx 0;

		// 	view{
		// 		width: 115px;
		// 		height: 34px;
		// 		margin-left: 10px;
		// 		line-height: 34px;
		// 		text-align: center;
		// 	}

		// 	input{
		// 		margin-left: 5rpx;
		// 		border: 1px solid #C0C0C0;
		// 		width: 130px;
		// 		height: 60rpx;
		// 		border-radius: 20rpx;
		// 		padding-left: 4px;
		// 	}

		// 	button{
		// 		width: 100px;
		// 		height: 60rpx;
		// 		font-size: 20rpx;
		// 		margin-right: 10rpx;
		// 	}
		// }

		.button {
			width: 90%;
			height: 80rpx;
			font-size: 30rpx;
			margin-top: 120rpx;
			border-radius: 40rpx !important;
			background-color: $main-color;
		}
	}
</style>
